<template>
  <div class="menu">
    <!--<mt-swipe :auto="0" :continuous="false">-->
      <!--<mt-swipe-item>-->
        <div class="menu_logo">
          <div v-for="item in menuOne" :key="item.id" @click="goModularData(item.id)">
            <img :src="item.img" :alt="item.title">
            <div>{{item.title}}</div>
          </div>
        </div>
      <!--</mt-swipe-item>-->
    <!--</mt-swipe>-->
  </div>
</template>

<script>

  const menuOne=[
    // {
    //   title: '视频海南',
    //   id: 'AllVideo',
    //   img: require('../assets/image/video.png')
    // },
    // {
    //   title: '视频看房',
    //   id: 'ReleaseHouse',
    //   img: require('../assets/image/house.png')
    // },
     {
      title: '找新楼盘',
      id: 'LookBuild',
      img: require('../assets/image/look-loupan.png')
    },

    {
      title: '找二手房',
      id: 'TwoHouse',
      img: require('../assets/image/ershou.png')
    },
    {
      title: '房屋委托',
      id: 'WeiTuoHouse',
      img: require('../assets/image/weituo.png')
    },
    {
      title: '找租房',
      id: 'RentingHouse',
      img: require('../assets/image/zufang.png')
    },
    // {
    //   title: '找小区',
    //   id: 'LookQu',
    //   img: require('../assets/image/look-qu.png')
    // },
    // {
    //   title: '找设计师',
    //   id: 'FundSheJi',
    //   img: require('../assets/image/video.png')
    // }
  ];
  import Vue from 'vue'
  import {Swipe, SwipeItem} from 'mint-ui';

  Vue.component(Swipe.name, Swipe);
  Vue.component(SwipeItem.name, SwipeItem);
  export default {
    name: 'Menu',
    data(){
      return{
        menuOne: menuOne
      }
    },
    methods:{
      //点击跳转至对应模块
      goModularData(name){
        this.$router.push({name:name})
      }
    }

  }
</script>

<style scoped>
  .menu {
    /*height: 100px;*/
    position: relative;
  }

  .menu_logo {
    display: flex;
    box-sizing: border-box;
    height: 100%;
    flex-wrap: wrap;
  }

  .menu_logo > div {
    width: 25%;
    height: 90px;
    text-align: center;
  }

  .menu_logo img {
    width: 3rem;
    height: 3rem;
  }
</style>
